<template>
  <Block :title="`${nextTradeday}潜力连板个股`">
    <template v-if="tableData.length">
      <atom-stock-list
        :tableLayout="4"
        :table-data="showTableData"
        :tags-option="{
          tagsable: true,
          fullWidth: true,
        }"
        ref="atomStockList"
        :columns="columns"
        @sortChange="sortChange"
        @rowClick="rowClick"
      >
        <template #body-stockName="{ row }">
          <div class="stock-name">
            {{ row.stockName }}<atom-tag type="minor-fill" class="minor" color="red">{{ row.plate }}连板</atom-tag>
          </div>
        </template>
        <template #body-price="{ row }">
          <div class="price" v-redGreen="row.price">
            {{ row.price || '--' }}
          </div>
        </template>
        <template #tagsRowRender="{ row }">
          <div class="tag-row-wrap">涨停原因：{{ row.reason }}</div>
        </template>
      </atom-stock-list>
      <More v-if="tableData.length > 3" expandText="展开更多" @updateExpanded="updateExpanded" />
    </template>
    <atom-empty type="search" v-else title="暂未筛选出潜力个股" />
  </Block>
</template>

<script>
import Block from '@/components/common/Block.vue';
import More from '@/components/common/More.vue';
import { reqTradeDays } from '@/apis/index.js';
import { jumpToFenShi, errorReport,formatDate } from '@/scripts/tools.js';
import sortDataMixins from '@/mixins/sortDataMixins.js';
import limitupMixins from '@/mixins/limitupMixins.js';
import { ztgyColumn } from '@/scripts/tableColumn.js';

export default {
  components: {
    Block,
    More,
  },
  mixins: [sortDataMixins, limitupMixins],
  data() {
    return {
      columns: JSON.parse(JSON.stringify(ztgyColumn)),
      // 数据源
      tableData: [],
      // 是否展开
      expanded: false,
      nextTradeday: '',
    };
  },
  computed: {
    showTableData() {
      const MINNUM = 3;
      const len = this.expanded ? this.tableData.length : MINNUM;
      return this.tableData.slice(0, len);
    },
  },
  methods: {
    getNextTradeDay() {
      reqTradeDays({ domain: 'CN', prev: 1 })
        .then(res => {
          const nextDay = res.data.nextDates.shift();
          this.nextTradeday = formatDate(nextDay,'-');
        })
        .catch(err => {
          errorReport({
            name: `接口获取下一个交易日错误,${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    sortChange(params) {
      this.sortData(this.columns, 'tableData', params);
    },
    updateExpanded(isExpanded) {
      window.hxmClickStat(`${_Global.stat.pageId}_mrqllb_zhankai`, {
        url_ver: _Global.stat.url_ver,
      });
      this.expanded = isExpanded;
    },
    getLbggDate() {
      this.getLbgg({ tableDataName: 'tableData', columnsName: 'columns' });
    },
    rowClick({ row: { stockCode, market } }) {
      jumpToFenShi(stockCode, market);
    },
  },
  activated() {
    this.getLbggDate();
    this.getNextTradeDay();
  },
};
</script>
<style lang="less" scoped>
.block {
  padding-right: 0;
}
.tag-row-wrap {
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: var(--text-7);
  letter-spacing: 0;
  line-height: 36px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stock-name {
  display: flex;
  align-items: center;
  white-space: nowrap;
  .minor {
    margin-left: 10px;
  }
}
.atom-stock-list__wrap {
  margin-right: 20px;
}
/deep/.atom-stock-list-header-row {
  .atom-stock-list-header-cell {
    &:nth-child(1) {
      width: 184px !important;
    }
    &:nth-child(2) {
      width: 190px !important;
      margin-left: 8px !important;
    }
    &:nth-child(3) {
      width: 138px !important;
      margin-left: 8px !important;
    }
    &:nth-child(4) {
      width: 150px !important;
      margin-left: 8px !important;
    }
  }
}
/deep/.atom-stock-list-header__center-wrap {
  width: 100% !important;
  .atom-stock-list-header__center {
    width: 100% !important;
    padding: 0 !important;
    .atom-stock-list-header-row {
      width: 100% !important;
    }
  }
}
/deep/.atom-stock-list-header__left-wrap,
/deep/.atom-stock-list-body__left-wrap {
  padding-left: 0 !important;
  width: 0 !important;
}
/deep/.atom-stock-list-body__center-wrap {
  width: 100% !important;
  .atom-stock-list-body__center {
    padding-right: 0 !important;
    width: 100% !important;
    .atom-stock-list-body-row {
      .atom-stock-list-row-cell-wrap {
        .atom-stock-list-body-cell {
          &:nth-child(1) {
            width: 210px !important;
          }
          &:nth-child(2) {
            width: 164px !important;
            margin-left: 8px !important;
          }
          &:nth-child(3) {
            width: 138px !important;
            margin-left: 8px !important;
          }
          &:nth-child(4) {
            width: 150px !important;
            margin-left: 8px !important;
          }
        }
      }
    }
  }
}
/deep/.atom-stock-list-body-row__tag-height {
  height: 140px;
}
.green {
  color: #090;
}
.red {
  color: #ff2436;
}
.price {
  font-size: 32px;
  line-height: 40px;
  font-family: THS, sans-serif;
  font-weight: normal;
}
</style>
